<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3246975_r7ow77w0bdn.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/tool.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .header {
            background-color: #f5f5f5;
        }

        .header .header-nav {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
        }

        .header .header-nav .header-nav-l,
        .header .header-nav .header-nav-r {
            font-size: 12px;
            display: flex;
        }

        .header .header-nav li {
            padding-right: 20px;
        }

        .header .header-nav .header-nav-l {
            float: left;
        }

        .header .header-nav .header-nav-r {
            float: right;
        }

        .header .header-nav .header-nav-l .hide {
            display: none;
        }

        .sign-tips a:first-child,
        .sign-user a:first-child {
            margin-right: 5px;
        }



        .header-nav-search {
            margin-top: 4px;
            float: left;
        }


        .header-nav-search .searchBar {
            width: 240px;
            height: 30px;
            border: 1px solid #dfdfdf;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            margin-left: 200px;
        }

        .header-nav-search .searchBar .searchCon {
            border: none;
            width: 210px;
            text-indent: 5px;
            background-color: transparent;
        }

        .header-nav-search .searchBar .searchBtn {
            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            color: #dfdfdf;
        }

        .container {
            width: 1226px;
            min-height: 500px;
            margin: 0 auto;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
        }

        .container .magnifier {
            width: 400px;
            /* background-color: grey; */
            position: relative;
        }

        .container .item-info {
            flex: 1;
            margin-left: 20px;
            /* background-color: #f6f6f6; */

        }

        .container .magnifier .magnifier-preview {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .container .magnifier .magnifier-preview .smallImg {
            width: 100%;
        }

        .container .magnifier .magnifier-preview .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;
            display: none;
        }

        .container .magnifier .magnifier-list {
            height: 100px;
            margin-top: 10px;
            /* background-color: orange; */
        }

        .container .magnifier .magnifier-list .list {
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .magnifier .magnifier-list .list .list-item {
            width: 58px;
            height: 58px;
        }

        .container .magnifier .magnifier-list .list .list-item img {
            width: 100%;
        }


        .container .magnifier .magnifier-scale {
            width: 500px;
            height: 500px;
            background-color: rgba(125, 255, 255, 0.6);
            position: absolute;
            left: -webkit-calc(100% + 20px);
            top: 0;
            overflow: hidden;
            display: none;
        }

        .container .magnifier .magnifier-scale img {
            width: 1000px;
            height: 1000px;
            position: absolute;
            left: 0;
            top: 0;
            /* z-index: -1; */
        }

        .container .item-info {
            padding: 0 10px;
        }

        .container .item-info>* {
            margin-bottom: 5px;
        }

        /* 去除input:number的上下箭头 */
        input[type='number']::-webkit-inner-spin-button,
        input[type='number']::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-nav w">
            <ul class="header-nav-l">
                <li>湖北</li>
                <li class="sign-tips">
                    <a href="./login.html">亲,请登录</a>
                    <a href="./register.html">免费注册</a>
                </li>
                <li class="sign-user hide">
                    <a href="javascript:;" class="lg-user">欢迎您,xxx</a>
                    <a href="javascript:;" class="exit">退出登录</a>
                </li>
            </ul>
            <ul class="header-nav-search">
                <div class="searchBar">
                    <input type="text" class="searchCon">
                    <i class="iconfont icon-sousuo searchBtn"></i>
                </div>
            </ul>
            <ul class="header-nav-r">
                <li><a href="">我的淘宝</a></li>
                <li><a href="">购物车</a></li>
                <li><a href="">收藏夹</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <!-- position:relative -->
        <div class="magnifier">
            <!-- <div class="magnifier-preview">
                <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
                <div class="shadow"></div>
            </div>
            <div class="magnifier-list">
                <ul class="list">
                    <li class="list-item"><img src="../images/girlsmall1.jpg" alt=""></li>
                    <li class="list-item"><img src="../images/girlsmall2.jpg" alt=""></li>
                    <li class="list-item"><img src="../images/girlsmall3.jpg" alt=""></li>
                    <li class="list-item"><img src="../images/girlsmall4.jpg" alt=""></li>
                </ul>
            </div>
            <div class="magnifier-scale">
                <img src="../images/girlbig1.jpg" alt="" class="bigImg">
            </div> -->
        </div>
        <div class="item-info">
            <!-- <h3 class="title"> OPPO 一加 Ace Pro 16GB+256GB 黑森 享OPPO官方售后 骁龙8+旗舰芯 长寿版150W闪充 游戏稳帧引擎 5G游戏手机</h3>
            <div class="price">￥ 3799.00</div>
            <div class="colors">
                <span>黑森</span>
                <span>青雾</span>
            </div>
            <div class="types">
                <span>12+256</span>
                <span>16+256</span>
                <span>16+512</span>
            </div>
            <div class="buy">
                <span class="reduce">-</span>
                <input type="number" value="1" class="buyNum">
                <span class="add">+</span>
            </div>
            <div class="add">
                <button class="addToShoppingCar">加入购物车</button>
            </div> -->
        </div>
    </div>
</body>
<script>
    var magnifier = document.getElementsByClassName("magnifier")[0];
    var itemInfo = document.getElementsByClassName("item-info")[0];


    var signTips = document.getElementsByClassName("sign-tips")[0];
    var signUser = document.getElementsByClassName("sign-user")[0];
    var goodsList = document.getElementsByClassName("goods-list")[0];
    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];

    var lgc = getCookie("lgc");
    if (lgc) {
        signTips.classList.add("hide");
        signUser.classList.remove("hide");
        var lgUser = signUser.getElementsByClassName("lg-user")[0];
        var exit = signUser.getElementsByClassName("exit")[0];

        lgUser.textContent = `欢迎您,${lgc}`;
        exit.onclick = function () {
            deleteCookie("lgc");
            location.reload();
        }
    }


    searchBtn.onclick = function () {
        var wd = searchCon.value;
        location.href = "./search.html?wd=" + wd;
    }

    var url = urlParamsParse();
    console.log(url);

    var gid = url.gid;
    if (!gid) { // 如果没有gid 非法跳转 => 1. 手动gid删除了 2.其他页面跳转过来
        location.href = "./index.html"; // 滚到主页面
    }



    ajax({
        type: "get",
        url: "http://43.138.81.225/demo/php/searchGoodsByGoodsId.php",
        data: {
            gid,
        },
        dataType: "json",
        success: function (result) {
            console.log(result);
            var { status, message, data } = result;
            if (status) { //有数据
                var { goodsName, goodsPrice, goodsImg, smallPicList, bigPicList, goodsDetail } = data;

                // lix5
                var listHTML = "";
                smallPicList.slice(0, 5).forEach((img) => {
                    listHTML += `<li class="list-item"><img src="${img}" alt=""></li>`
                })



                var magnifierHTML = `<div class="magnifier-preview">
                <img class="smallImg" src="${goodsImg}" alt="">
                <div class="shadow"></div>
            </div>
            <div class="magnifier-list">
                <ul class="list">
                    ${listHTML}
                </ul>
            </div>
            <div class="magnifier-scale">
                <img src="${bigPicList[0]}" alt="" class="bigImg">
            </div>`
                magnifier.innerHTML = magnifierHTML;

                var infoHTML = `<h3 class="title">${goodsName}</h3>
                <div class="price">￥ ${goodsPrice}</div>
                <div class="colors">
                    <span>黑森</span>
                    <span>青雾</span>
                </div>
                <div class="types">
                    <span>12+256</span>
                    <span>16+256</span>
                    <span>16+512</span>
                </div>
                <div class="buy">
                    <span class="reduce">-</span>
                    <input type="number" value="1" class="buyNum">
                    <span class="add">+</span>
                </div>
                <div class="add">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>`
                itemInfo.innerHTML = infoHTML;


                // 点击加入购物车
                var addToShoppingCar = document.getElementsByClassName("addToShoppingCar")[0];
                var buyNumInp = document.getElementsByClassName("buyNum")[0];

                // 加入购物车需要知道哪些信息?   谁 买了什么东西 买了多少件?
                // 谁?            => 当前登录的用户(用cookie  实际使用token(后端给的))
                // 买了什么东西?   => 购买的商品信息(goodsId)
                // 买了多少件?     => 购买的商品数量

                addToShoppingCar.onclick = function () {
                    // 谁?   => 当前登录的用户(用cookie)  => 用户可能没有登录
                    if (lgc) { //用户已登录
                        var buyNum = buyNumInp.value;

                        ajax({
                            type: "post",
                            url: "http://43.138.81.225/demo/php/addToShoppingCar.php",
                            data: {
                                user: lgc,
                                gid,
                                buyNum,
                            },
                            dataType: "json",
                            success: function (result) {
                                console.log(result);
                                var { status, message } = result;
                                if (status) {
                                    if (confirm("加入成功,是否跳转购物车?")) {
                                        location.href = "./shoppingCar.html";
                                    }
                                } else {
                                    alert(message);
                                }
                            }
                        })



                    } else {  // 没有登录 => 去登录
                        // 问题: 
                        // 没有登录 => 去登录 => 登录成功 => index.html

                        // 怎么解决?
                        // 在跳转登录的同时携带数据ReturnUrl=当前url地址 => 登录成功判断是否存在ReturnUrl
                        // 不存在 => 去index.html
                        // 存在 => 其他页面跳转过来  => 回去 

                        location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
                    }

                }





            } else {  //查询商品没有数据  => 回主页
                location.href = "./index.html";
            }
        }
    })





</script>

</html>